<template>
  <div>
    <el-form :model="from" :rules="rules" status-icon ref="ruleForm" label-width="120px" class="demo-ruleForm">
      <el-form-item label="姓名：" prop="fullName">
        <el-input
          type="text"
          v-model="from.fullName"
          autocomplete="off"
          size="small"
          maxlength="10"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="照片：">
        <el-upload
          class="upload-demo"
          :action="upaction + '/matters/upload'"
          :headers="headers"
          :on-success="success"
          :before-remove="beforeRemove"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="手机号：" prop="phone" :rules="checkphone">
        <el-input v-model="from.phone" size="small" maxlength="11" clearable></el-input>
      </el-form-item>
      <el-form-item label="账号：" prop="account">
        <el-input v-model="from.account" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input v-model="from.password" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="password">
        <el-input v-model="password" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="身份证号：">
        <!--prop="idCard" :rules="checkId" -->
        <el-input v-model="from.idCard" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="角色选择：" prop="roleIds">
        <el-select v-model="from.roleIds" placeholder="请选择" size="small" @change="choose">
          <el-option v-for="item in postuser" :key="item.id" :label="item.roleName" :value="item.id"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="网格区域" v-if="from.roleIds == 2 || from.roleIds == 6" prop="unitGridId">
        <el-select v-model="from.unitGridId" placeholder="请选择" size="small">
          <el-option v-for="item in postionA" :key="item.id" :label="item.name" :value="item.zoningCode"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="海康通讯号码：">
        <el-input v-model="from.haikangNumber" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as api from '@/api/admin'
import env from '@/utils/env'
export default {
  props: {
    postuser: {
      type: Array,
      default() {
        return []
      },
    },
    positionmesssage: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    const CheckUserphone = (rules, value, callback) => {
      var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      if (!value) {
        return callback(new Error('请填写手机号码'))
      } else if (!reg.test(value)) {
        return callback(new Error('输入号码格式有误！'))
      } else {
        callback()
      }
    }
    const CheckUserI = (rules, value, callback) => {
      var reg =
        /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/
      if (!value) {
        return callback(new Error('请输入身份证信息！'))
      } else if (!reg.test(value)) {
        return callback(new Error('输入身份证号码有误！'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('该项不能为空！'))
      } else {
        if (value !== '') {
          callback()
        }
      }
    }
    return {
      valueUrl: '',
      roleId: '',
      password: '',
      fileList: [],
      headers: { Authorization: '' },
      arr: [],
      postionA: [],
      required: false,
      from: {
        account: '',
        avatar: '',
        fullName: '',
        idCard: '',
        password: '',
        unitGridId: '',
        phone: '',
        roleIds: [],
        salt: '',
        number: '',
      },
      usermessage: {
        pageNo: 1,
        pageSize: 100,
        roleName: '',
      },
      upaction:
        process.env.NODE_ENV === 'production'
          ? env.prod.baseUrl
          : process.env.NODE_ENV === 'test'
          ? env.test.baseUrl
          : env.dev.baseUrl,
      checkphone: [
        {
          required: true,
          validator: CheckUserphone,
          trigger: 'blur',
        },
      ],
      checkId: [
        {
          required: true,
          validator: CheckUserI,
          trigger: 'blur',
        },
      ],
      rules: {
        fullName: [{ required: true, validator: validatePass, trigger: 'blur' }],
        phone: [{ required: true, validator: validatePass, trigger: 'blur' }],
        account: [{ required: true, validator: validatePass, trigger: 'blur' }],
        password: [{ required: true, validator: validatePass, trigger: 'blur' }],
        idCard: [{ required: true, validator: validatePass, trigger: 'blur' }],
        roleIds: [{ required: true, validator: validatePass, trigger: 'blur' }],
        unitGridId: [{ required: true, validator: validatePass, trigger: 'blur' }],
      },
    }
  },
  created() {
    // this.postionA = this.positionmesssage
  },
  mounted() {
    this.token = localStorage.getItem('Authorization')
    this.headers = { Authorization: this.token }
    this.getCidadeList()
  },
  methods: {
    success(res) {
      if (res.code == 200) {
        this.from.avatar = res.data.minIoUrl
        this.$message({
          message: '上传成功!',
          type: 'success',
        })
      }
    },
    choose(val) {
      if (val == 2) {
        this.required = true
      } else {
        this.required = false
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制上传1个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    Submit() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          let tar = this.from.roleIds
          this.arr.push(tar)
          this.from.roleIds = this.arr
          if (this.from.password != this.password) {
            this.$message({
              message: '请输入相同密码！',
              type: 'error',
            })
          } else {
            api.adduser(JSON.stringify(this.from)).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '添加成功！',
                  type: 'success',
                })
                this.arr = []
                this.password = ''
                this.$refs['ruleForm'].resetFields()
                this.$parent.handleClose()
                this.fileList = []
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error',
                })
                this.from.roleIds = []
                this.arr = []
              }
            })
          }
        }
      })
    },
    getCidadeList() {
      api.getCidadeList({ pid: 991713 }).then(res => {
        this.postionA = res.data
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.el-form {
  width: 437px;
  margin-left: 30px;
  .alert-box-item {
    overflow: hidden;
  }
}
</style>
